<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-18 19:25:44
-->
<template>
    <div ref="root" style="height: 95%"></div>
</template>
<script>
import { Pie } from "@antv/g2plot";
import { ref, onMounted, onUnmounted } from "vue";

export default {
  // 组件名称
  type: "demo",
  // 组件状态值
  setup() {
    const root = ref(null);
    let plot = null;

    let data_pie = ref([]);
    const loadData = async () => {
      data_pie.value = [
        { type: '软件学院', value: 27 },
        { type: '农学院', value: 25 },
        { type: '园艺学院', value: 18 },
        { type: '动物医学学院', value: 15 },
        { type: '林学院', value: 10 },
        { type: '其他', value: 5 },
      ];
    };

    const initChart = () => {
      plot = new Pie(root.value, {
        appendPadding: 10,
        data:data_pie.value,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: (v) => `${v}%`,
          },
        },
        label: {
          type: 'inner',
          offset: '-50%',
          autoRotate: false,
          style: { textAlign: 'center' },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        },
        statistic: {
          title: {
            offsetY: -8,
            style:{
              color:"yellow",
             fontSize: '16px',
            }
          },
          content: {
            offsetY: -4,
            style: {
            color:"yellow",
            fontSize: '22px',
          },
          },
        },
        // 添加 中心统计文本 交互
        interactions: [
          { type: 'element-selected' },
          { type: 'element-active' },
          {
            type: 'pie-statistic-active',
            cfg: {
              start: [
                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
              ],
              end: [
                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
              ],
            },
          },
        ],
      });
      plot.render();
    };

    onMounted(async () => {
      await loadData();
      initChart();
    });

    onUnmounted(() => {
      if (plot) {
        plot.destroy();
      }
    });

    return {
      root,
    };
  },
};
</script>
<style scoped>
</style>